<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" charset="UTF-8">
    <title>登录</title>
    <link href="font/css/font-awesome.css" rel="stylesheet" type="text/css">
    <link href="css/top-navigation.css" rel="stylesheet" type="text/css">


    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }

        #main-box{
            background-color: #EEE;
            position:absolute;
            top:70px;
            bottom: 0;
            left:0;
            right:0;
            min-height: 500px;
        }

        .main-form{
            position: absolute;
            top:42%;
            left:50%;
            transform:translate(-50%,-50%);
            width:600px;
        }

        .main-form-title{
            color:  #C72812;
            font-size: 40px;
            text-align: center;
        }

        #main-form{
            margin-top:30px;
        }

        .input-item{
            width:100%;
            height:50px;
            overflow: hidden;
            margin:25px 0;
        }

        .input-item .input-label{
            float: left;
            width:100px;
            height:50px;
            line-height: 50px;
            text-align: center;
            color:#444;
        }

        .input-item .input-box{
            float: left;
            width:398px;
            height:48px;
            line-height: 48px;
            border:1px solid #999;
            border-radius: 3px;
            padding:0 10px;
            position: relative;
            background-color: #ffffff;
        }

        
        .input-item .input-box > i{
            position: absolute;
            top:16px;
            left:10px;
            color: #bbb;
        }

        .input-item .input-box > input{
            width: 100%;
            height:48px;
            line-height: 48px;
            font-size: 16px;
            border: none;
            outline: none;
            float: left;
        }

        .input-box-verifi{
            float: left;
            width:398px;
            height:50px;
            line-height: 50px;
        }

        .input-box-verifi > input{
            width:188px;
            height:48px;
            line-height: 48px;
            border:1px solid #999;
            border-radius: 3px;
            background-color: #ffffff;
            float: left;
            padding:0 10px;
        }

        #verifi-code{
            width:100px;
            height:50px;
            overflow: hidden;
        }

        #submit-btn{
            display: block;
            width:420px;
            height:50px;
            border: none;
            background-color: #C72812;
            color:#ffffff;
            font-size: 16px;
        }


    </style>

    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $("#main-form .input-icon-box").on("keyup click",'input',function(e){
                var i = $(e.target).prev("i");
                if(i){
                    var inputText = $(e.target).val();
                    if(inputText.length > 0){
                        i.hide();
                    }else{
                        i.show();
                    }
                }
            })
        });
    </script>

    <!--<script src="https://use.fontawesome.com/1829b45e75.js"></script>-->

</head>
<body>

<div id="top-navigation" class="top-navigation">
    <div id="top-main" class="top-main">

        <div class="site-title">
            乐器数据库
        </div>

        <div class="func-box">
            <a href="#" class="language">EN</a>
            <a href="#" class="language">中文</a>
            <a href="#">关于我们</a>
            <a href="#">登录</a>
            <a id="btn-register" href="#"> <i class="fa fa-user" aria-hidden="true"></i>立即注册</a>
        </div>

        <div class="search-box">
            <form id="search-form" class="search-from" target="_blank" method="get" action="#">
                <button id="search-btn" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>

                <div class="search-panel">
                    <input id="search-input" type="text" placeholder="搜索乐器关键字">
                </div>
            </form>
        </div>
    </div>
</div>

<div class="main-box" id="main-box">
    <div class="main-form">
        <div class="main-form-title">
            用户登录
        </div>

        <form id="main-form" action="#" method="get">
            <div class="input-item">
                <span class="input-label">用户名</span>
                <div class="input-box input-icon-box">
                    <i class="fa fa-user" aria-hidden="true"></i>
                    <input type="text"/>
                </div>
            </div>

            <div class="input-item">
                <span class="input-label">密码</span>
                <div class="input-box input-icon-box">
                    <i class="fa fa-lock" aria-hidden="true"></i>
                    <input type="text"/>
                </div>
            </div>

            <div class="input-item">
                <span class="input-label">验证码</span>
                <div class="input-box-verifi">
                    <input id="verifi" type="text"/>
                    <img id="verifi-code" src="img/verification.jpg">
                </div>
            </div>

            <div class="input-item">
                <span class="input-label"></span>
                <input id="submit-btn" type="submit" value="登录">
            </div>

        </form>
    </div>

</div>
</body>
</html>